<template>
		<!-- 广告页：进入app先显示7秒广告再跳转首页 ，也可直接跳过-->
	<view class="ad-page">
		<!-- logo页 -->
		<view class="logo-bg">
			<image src="../../static/image/ad/1.png" class="top-logo" mode="widthFix"></image>
			<image src="../../static/image/ad/2.png" class="bot-logo" mode="widthFix"></image>
		</view>
		<!-- 广告页 -->
		<view class="ad-bg" :class="isShowAd?'active':''">
			<image class="ad" :src="picture" mode=""></image>
			<view class="ad-logo">
				<image class="img" src="../../static/image/ad/3.png" mode="widthFix"></image>
			</view>
			<view class="close" @click="close">
				跳过广告
			</view>
		</view>
	</view>
</template>

<script>
	import { apiAd } from "@/apis/index.js"
	export default {
		data() {
			return {
				isShowAd:false,   	//控制广告页显示
				picture:'',			//广告图片
				startTime:0,		//开始时间（当前时间-开始）
				adWaitTime:2000,	//广告等待时间
				adShowTime:7000,	//广告显示时间
				adTimer:null,		//定时句柄id,用于提前关闭定时器
			}
		},
		onLoad() {
			this.getAd()
			// 重置开始时间
			this.startTime = (new Date()).getTime()
		},
		methods: {
			// 跳过按钮
			close(){
				// 提前关闭定时器，防止重复跳转到首页
				clearTimeout(this.adTimer)
				// 跳转
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			// 广告页接口
			getAd(){
				let self = this
				self.isShowAd = false
				// apiAd().then(res => {
				// 	// 开始计算等待的时间
				// 	let nowTime = (new Date()).getDate()
				// 	// 时间差
				// 	let questTime = nowTime - self.startTime
				// 	// 计算等待时间
				// 	let wait = questTime < self.adShowTime ? (self.adShowTime - questTime) : 0
				// 	//等待跳转广告页的任务
				// 	setTimeout(()=>{
				// 		self.isShowAd = true
				// 		self.picture = res.data.mock.ad //加上广告页图片
				// 	},wait)
				// 整个广告执行不能大于7S,否则自动关闭广告跳转到首页
				// self.adTimer = setTimeout(()=>{
				// 	self.close()
				// },self.adShowTime)
				// })
				
				// 接口不行，这里模仿接口返回数据---------------------
				// 开始计算等待的时间
				let nowTime = (new Date()).getDate()
				// 时间差
				let questTime = nowTime - self.startTime
				// 计算等待时间
				let wait = questTime < self.adWaitTime ? (self.adWaitTime - questTime) : 0
				//等待跳转广告页的任务
				setTimeout(()=>{
					self.isShowAd = true
					self.picture = "@/static/image/account/a_m4.png" //加上广告页图片
				},wait)
				// 整个广告执行不能大于7S,否则自动关闭广告跳转到首页
				self.adTimer = setTimeout(()=>{
					self.close()
				},self.adShowTime)
			}
		}
	}
</script>

<style lang="scss">
.ad-page{
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background: #da2d1f;
	z-index: 1000;
	.top-logo{
		position:absolute;
		top: 423rpx;
		left:50%;
		width:450rpx;
		height:93rpx;
		transform: translateX(-50%);
	}
	.bot-logo{
		position:absolute;
		bottom: 40rpx;
		left:50%;
		width:220rpx;
		height:43rpx;
		transform: translateX(-50%);
	}
	.ad{
		position:absolute;
		width:100%;
		height:100%;
		z-index: 2;
		background: #fff;
	}
	.logo-bg{
		opacity: 1;
		transition: opacity 0.3s;
		&.active{
			opacity: 0;
			display: none;
		}
	}
	.ad-bg{
		opacity: 0;
		transition: opacity 0.3s;
		&.active{
			opacity: 1;
			display: block;
		}
	}
	.ad-logo{
		position:absolute;
		left:0;
		bottom:0;
		width:100%;
		height: 168rpx;
		background: #fff;
		z-index: 3;
		.img{
			display: block;
			width:258rpx;
			height:86rpx;
			margin: 40rpx auto 0;
		}
	}
}
.close {
	position: absolute;
	right: 20rpx;
	bottom: 190rpx;
	width: 146rpx;
	height: 62rpx;
	color: #fff;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 62rpx;
	text-align: center;
	line-height: 62rpx;
	z-index: 101;
}
</style>

